<template>
  <div class="app-container">
    <div class="syl-group">
      <el-form ref="queryForm" :model="queryParams" :inline="true" @submit.native.prevent>
        <el-form-item label="企业名称:" prop="companyName">
          <el-input
            v-model="queryParams.companyName"
            placeholder="请输入"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="电话号码:" prop="contactPhone">
          <el-input
            v-model="queryParams.contactPhone"
            placeholder="请输入"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="选择时间:" prop="name">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            size="small"
            style="width: 270px"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-row :gutter="20" class="mb8">
          <el-col :span="24">
            <el-form-item label="订单金额">
              <el-radio-group v-model="radio" class="syl-group-order" @change="getGroup">
                <el-radio :label="1">不限</el-radio>
                <el-radio :label="2">1000以下</el-radio>
                <el-radio :label="3">1000-2000元</el-radio>
                <el-radio :label="4"> 2000-3000元</el-radio>
                <el-radio :label="5"> 3000-4000元</el-radio>
                <el-radio :label="6"> 4000以上</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label=" 自定义:">
              <el-input v-model="min" size="small" :maxlength="5" style="width: 60px" />
              ~
              <el-input v-model="max" size="small" :maxlength="5" style="width: 60px" />
              <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="syl-export">导出订单汇总</div>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <div class="syl-left">选择时间:</div>
          <el-date-picker
            v-model="value1"
            type="date"
            size="small"
            placeholder="选择日期"
          />
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            style="background-color: #FF7542;border: 1px solid #FF7542"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
          >导出
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            style="background-color: #5AC1FF;border: 1px solid #5AC1FF"
            icon="el-icon-download"
            size="mini"
            @click="handleExport1"
          >导出原材料
          </el-button>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="equWristbandList"
        :header-cell-style="{background:'#F3F9FF',color:'#333333',fontWeight: 600}"
      >
        <el-table-column label="订单号" align="center" prop="order.orderNo" :show-overflow-tooltip="true" />
        <el-table-column label="时间" align="center" prop="order.createTime" :show-overflow-tooltip="true" />
        <el-table-column label="公司" align="center" prop="order.companyName" :show-overflow-tooltip="true" />
        <el-table-column label="联系电话" align="center" prop="order.contactPhone" />
        <el-table-column label="套餐数量" align="center" prop="order.packageNum" />
        <el-table-column label="订单金额" align="center" prop="order.orderMoney" />
        <el-table-column label="配送门店" align="center" prop="storeName" :show-overflow-tooltip="true" />
        <el-table-column label="状态" align="center" prop="order.orderStatus">
          <template slot-scope="scope">
            <span v-html="getStatus(scope.row.order.orderStatus)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <router-link :to="{path: '/orderList/infos',query:{id:scope.row.order.id}}">
              <el-button
                size="mini"
                type="text"
              >查看
              </el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>
<script>
import { getCenterList } from '@/api/order'
import serverMap from '../../../../config/serverMap'

export default {
  name: 'Index',
  data() {
    return {
      // 订单日期
      value1: new Date(),
      // 遮罩层
      loading: false,
      lodaing: false,
      selectedOptions: [],
      dateRange: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 订单表格数据
      equWristbandList: [],
      // 状态
      options: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderMoneyMin: undefined,
        orderMoneyMax: undefined
      },
      min: undefined,
      max: undefined,
      // 订单金额
      radio: 1,
      // 表单参数
      form: {
        imei: undefined,
        icNum: undefined,
        suplyCompany: undefined,
        useStatus: '0'
      },
      // 表单校验
      rules: {
        imei: [
          { required: true, message: '请输入手环号', trigger: 'blur' },
          {
            pattern: /^[0-9a-zA-Z]*$/g,
            message: '手环号不能输入汉字和特殊字符',
            trigger: 'blur'
          }
        ],
        icNum: [
          { required: true, message: '请输入卡编号', trigger: 'blur' },
          {
            pattern: /^[0-9]*$/,
            message: '卡号为数字',
            trigger: 'blur'
          }
        ]
      },
      // 订单状态
      valueStatus: [
        { value: 1, label: '点餐中' },
        { value: 2, label: '未支付' },
        { value: 3, label: '已支付' },
        { value: 4, label: '已接单' },
        { value: 5, label: '代配送' },
        { value: 6, label: '配送中' },
        { value: 7, label: '已送达' },
        { value: 8, label: '支付超时' },
        { value: 9, label: '取消订单' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询订单列表 */
    getList() {
      const min = this.min
      const max = this.max
      const { orderMoneyMax, orderMoneyMin } = this.queryParams
      if (orderMoneyMax !== null && orderMoneyMax !== undefined) {
        this.queryParams = {
          orderMoneyMin: orderMoneyMin,
          orderMoneyMax: orderMoneyMax
        }
      }
      if (min !== null && min !== undefined) {
        this.queryParams = {
          orderMoneyMin: min,
          orderMoneyMax: max
        }
      }
      getCenterList(this.addDateOrder(this.queryParams, this.dateRange)).then(res => {
        const { total, list } = res.data
        this.total = total
        this.equWristbandList = list
        this.radio = 1
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.orderMoneyMax = null
      this.queryParams.orderMoneyMin = null
      this.min = null
      this.max = null
      this.radio = 1
      this.dateRange = []
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加门店'
    },
    /** 订单状态回显 **/
    getStatus(value) {
      const arr = [null, undefined, '']
      if (!arr.includes(value)) {
        const name = this.valueStatus.find(item => item.value === value)
        return name.label
      }
    },
    /** 金额 **/
    getGroup(value) {
      if (value === 1) {
        this.queryParams.orderMoneyMin = null
        this.queryParams.orderMoneyMax = null
      } else if (value === 2) {
        this.queryParams.orderMoneyMin = 0
        this.queryParams.orderMoneyMax = 1000
      } else if (value === 3) {
        this.queryParams.orderMoneyMin = 1000
        this.queryParams.orderMoneyMax = 2000
      } else if (value === 4) {
        this.queryParams.orderMoneyMin = 2000
        this.queryParams.orderMoneyMax = 3000
      } else if (value === 5) {
        this.queryParams.orderMoneyMin = 3000
        this.queryParams.orderMoneyMax = 4000
      } else {
        this.queryParams.orderMoneyMin = 4000
        this.queryParams.orderMoneyMax = null
      }
      getCenterList(this.addDateOrder(this.queryParams, this.dateRange)).then(res => {
        const { total, list } = res.data
        this.total = total
        this.equWristbandList = list
      })
    },
    /** 导出 **/
    handleExport() {
      const date = this.value1
      window.location.href = serverMap.base + '/api/order/exportManageAllCompanyOrderList?startDate=' + this.parseTime(date, '{y}-{m}-{d}') + '&endDate=' + this.parseTime(date, '{y}-{m}-{d}')
    },
    /** 导出原料 **/
    handleExport1() {
      const date = this.value1
      window.location.href = serverMap.base + '/api/order/exportStoreOrderMaterialList?searchDate=' + this.parseTime(date, '{y}-{m}-{d}')
    },
    /** 企业订单导出 **/
    handleExport2() {
      const date = this.value1
      window.location.href = serverMap.base + '/api/order/exportStoreOrderList?searchDate=' + this.parseTime(date, '{y}-{m}-{d}') + '&endDate=' + this.parseTime(date, '{y}-{m}-{d}')
    }
  }
}
</script>
<style lang="scss" scoped>
.syl-export {
  height: 32px;
  line-height: 32px;
  color: #333333;
  font-size: 18px;
  font-weight: 600;
}

.mb6 {
  margin-bottom: 15px;
}

.mb8 {
  margin: 20px 0;
}

.syl-left {
  height: 32px;
  line-height: 32px;
  float: left;
  font-size: 14px;
  padding-right: 12px;
  color: #606266;
  font-weight: 700
}

.syl-group-order {
  height: 32px;
  line-height: 33px;
}

/deep/ .el-button {
  margin: 0 12px;
}

/deep/ .el-radio {
  line-height: 32px;
}

.syl-radio {
  color: #606266;
  font-weight: 700;
  float: left;
  font-size: 14px;
  margin-left: 15px;
  padding-right: 12px;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
